<template>
  <div>
    <div
      class="item"
      :class="{ 'item-actived': item == 1 }"
      v-for="(item, index) in 8"
      :key="index"
    >
      <div class="item-left">
        <img
          src="https://image.xuexiwangzhe.com/Fp-hgIy1KcPt6pdyoS08yGSrWKuf"
          class="move-img"
        />
        <img
          src="https://image.xuexiwangzhe.com/FhVYD9P7xwQTWidStdoTFgcEfzoV"
          class="move-img move-img-actived"
        />
        <div class="number">2</div>
        <div>
          <div class="name">主题名称</div>
          <div class="date">2021-03-1 周一</div>
        </div>
      </div>
      <img
        class="menu-img"
        src="https://image.xuexiwangzhe.com/FlyYlpXpFTBowIzuzu2C5ArQfCzf"
      />
      <img
        src="https://image.xuexiwangzhe.com/FhYGEaKu3UF7H4-bIMgExcaUm5M3"
        class="menu-img menu-img-actived"
      />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 18px;
  padding-right: 21px;

  &-actived {
    background-color: #f2f4f8;

    .name {
      color: #265cff;
    }

    .date {
      color: #333;
    }

    .move-img {
      display: none;
    }

    .move-img-actived {
      display: block;
    }

    .menu-img {
      display: none;
    }

    .menu-img-actived {
      display: block;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 5px;
      background-color: #265cff;
    }
  }
}

.item-left {
  display: flex;
  align-items: center;
}

.name {
  font-weight: bold;
  margin-bottom: 3px;
}

.move-img {
  width: 15px;
  margin-right: 11px;
}

.move-img-actived {
  display: none;
}

.number {
  margin-right: 16px;
}

.date {
  font-size: 12px;
  color: #999;
}

.menu-img {
  width: 15px;
}

.menu-img-actived {
  display: none;
}
</style>
